(function($) {
    $.fn.etable = function(options) {
    	
        options = $.extend({},$.fn.etable.defaults, options);
        $(this).empty();
        var row;//缓存最后一行数据在这里，点击新增按钮时有用
        var table = $("<table class=\"table table-bordered table-striped table-hover\" style=\"margin-bottom:10px;width:100%\"></div></table>").appendTo($(this));
        var thead = $("<thead></thead>").appendTo(table);
        if (options.showRownum){
            thead.append('<th style="text-align:center;width:'+options.head[i].width+'px;" >序号</th>');
        }
        for (var i = 0; i < options.head.length; i++) {
            thead.append('<th style="text-align:center;width:'+options.head[i].width+'px;" >' + options.head[i].name + '</th>');
        }
        if (options.view == "edit"){
            thead.append('<th style="text-align:center;width:36px;"><button type="button" style="height:22px;width:22px;background-color:#fff;cursor:pointer;border-radius:2px;border:1px solid transparent;" action="add"><span class="glyphicon glyphicon-plus"></span></button></th>');//用来存放按钮的列
        }
        thead.find("button").click(actionClick);
        thead.wrapInner("<tr></tr>");
        if ( options.view == "edit" ) {//编辑模式
            var tbody = $("<tbody></tbody>").appendTo(table);
            $(options.data).each(function(index) {
                row = options.data[index];
                var $tr = $('<tr></tr>');
                var i = 0;
                for ( var key in row) {
                    if (key == "id") {
                        $td = $('<td key="id" style="display:none;">' + row.id + '</td>');
                    }else{
                        $td = $('<td key="' + key + '"></td>');
                        //通过表头的component属性找到该数据用什么控件展现
                        if (options.head[i].component!="" && options.head[i].component!=undefined) {
                            if (options.head[i].component=="text"){
                                var $input = $("<input type='text' class='form-control'>").width(options.head[i].width);
                                $input.val(row[key]);
                                $td.append($input);
                                if (options.head[i].validation!="") {
                            		$input.attr("data-validation-engine",options.head[i].validation);
                                }
                            } else if (options.head[i].component=="selectInput"){
                            	 var $input = $("<input type='text' class='form-control'>").width(options.head[i].width);
                                 $input.val(row[key]);
                                 $td.append($input);
                                 eval("$input."+ options.head[i].component + "(options.head[i].para)");
                                 if (options.head[i].validation!="") {
                             		$input.attr("data-validation-engine",options.head[i].validation);
                                 }
                            }else{
                                callFunc("$td."+ options.head[i].component,key,row[key]);
                            }
                        }
                        i++;
                    }
                    $tr.append($td);
                }
                var $actionBut = $('<td key="action" action="edit" ><button type="button" class="btn btn-default btn-sm" action="del"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></td>');
                $tr.append($actionBut);
                //按钮点击事件
                $tr.find("button").click(actionClick);
                tbody.append($tr);
            });
        }else if (options.view=="click"){//点击模式
        	
        }else{//查看模式
            var tbody = $("<tbody></tbody>").appendTo(table);
            $(options.data).each(function(index) {
                var row = options.data[index];
                var $tr = $("<tr></tr>");
                for ( var key in row) {
                    if (key == "id") {
                        $td = $('<td key="id" style="display:none;">' + row.id + '</td>');
                    }else {
                        $td = $('<td key="' + key + '">' + row[key] + '</td>');
                    }
                    $tr.append($td);
                }
                tbody.append($tr);
            });
        }
        //点击新增删除按钮时触发
        function actionClick(){
            if ($(this).attr("action")=="add"){//新增行
                var $tr = $('<tr></tr>');
                $tr.append('<td key="id" style="display:none;"></td>');
            	for (var i = 0; i < options.head.length; i++) {
                    $td = $('<td key="' + options.head[i].key + '"></td>');
                    if (options.head[i].component!="" && options.head[i].component!=undefined) {
                        if (options.head[i].component=="text"){
                            if (options.head[i].validation!="") {
                                var $input = $('<input type="text" class="form-control" data-validation-engine="'+options.head[i].validation+'">').width(options.head[i].width);
                                $td.append($input);
                            }else{
                                var $input = $('<input type="text" class="form-control">').width(options.head[i].width);
                                $td.append($input);
                            }
                        }else if (options.head[i].component=="selectInput"){
	                       	 var $input = $("<input type='text' class='form-control'>").width(options.head[i].width);
	                         $td.append($input);
	                         eval("$input."+ options.head[i].component + "(options.head[i].para)");
	                         if (options.head[i].validation!="") {
	                     		$input.attr("data-validation-engine",options.head[i].validation);
	                         }
                        }else{
                            callFunc("$td."+ options.head[i].component,options.head[i].key);
                        }
                    }
                    $tr.append($td);
                }
                var $butGroup = $('<td key="action" action="add" ><button type="button" class="btn btn-default btn-sm" action="del"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></td>');
                $tr.append($butGroup);
                $tr.find("button").click(actionClick);
                $(this).parent().parent().parent().parent().find("tbody").append($tr);
            }else if ($(this).attr("action")=="del"){//删除当前行
            	if ($(this).parent().attr("action")=="add"){
            		$(this).parent().parent().remove();
            	}else{
            		$(this).parent().attr("action","del").parent().hide();
            	}
            }
        }
        $.fn.etable.defaults = {
            showRownum : false
        };
    };
    //获取etable里面的值
    $.fn.getEtableValue = function() {
        var $trs = $(this).find("tr");
        var rows = new Array($trs.length-1);
        $trs.each(function(i) {
            if (i>0){//0是表头
                var row = {};
                $(this).find("td").each(function(){
	                    var key = $(this).attr("key");
	                    if (key!=undefined && key!=""){
	                        if (key=="id"){
	                            row[key]=$(this).html();
	                        }else if (key=="action"){
	                        	row[key]=$(this).attr("action");
	                        }else{
	                        	if ($(this).children(".form-control").size()>0){
		                            var value = $(this).children(".form-control").val();
		                            if (value==""){
		                            	//alert($(this).children(".form-control").attr("class"));
		                            }
		                            row[key]=value;
	                        	}else{
	                        		row[key]=$(this).html();
	                        	}
	                        }
	                    }
	                }
                );
                rows[i-1] = row;
            }
        });
        return rows;
    };
})(jQuery);